import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';


import { CHANGE_HOT_RECOMMEND } from '../../../../../../common/contants'
import ASThemeHeaderRCM from '../../../../../../components/theme-header-rcm'
import {HotRecommendWrapper} from './style';
import { getHotRecommendAction } from '../../store/actionCreators';
import  ASSongsCover   from  '../../../../../../components/songs-cover/index'

export default memo(function ASHotRecommend() {
  //redux hooks
  
  const { hotRecommends } = useSelector(state => ({
    hotRecommends: state.getIn(["recommend","hotRecommends"])
  }),shallowEqual)

  // console.log(hotRecommends)
  const dispatch = useDispatch()
  //hooks

  useEffect(() => {
    dispatch(getHotRecommendAction(CHANGE_HOT_RECOMMEND))
  }, [dispatch])
  return (
    <HotRecommendWrapper>
      <ASThemeHeaderRCM title='热门推荐' keywords={['华语', '流行', '摇滚', '民谣', '电子']}/>
      <div className='recommend-list'>
        {
          hotRecommends.map((item,index) => {
            return(
              <ASSongsCover key={item.id} info={item}></ASSongsCover>
            )
          })
        }
      </div>
    </HotRecommendWrapper>
  )
})
